<template>
<!-- todo 菜单权限更新后，缓存的收藏需更新权限-->
  <div>
    <div style="margin-bottom:24px">
      <a-switch checked-children="仅看收藏" un-checked-children="查看全部" :value="lookMode" @change="changeMode" style="margin-right:24px;"/>{{lookMode?'收藏夹可拖拽排序':''}}
      <a-button v-if="hasPMenu&&!lookMode" @click="goBack" >返回上级菜单</a-button>
    </div>
    <a-row v-if="!lookMode" :gutter="24">
      <a-col class="menu-box" span="6" v-for="(menu,index) in menus" :key="menu.path">
        <router-link @click.native="hiddenMenu($event,menu)" v-if="!menu.children" :class="selectedMenu==menu.path?'link-btn selected' : 'link-btn'" to="">
          <a-icon v-if="menu.meta.icon" :type=" menu.meta.icon " />
          <span>{{ menu.meta.title }}</span>
          <a-icon style="font-size:24px;margin-left:12px" @click.stop="toggleSave($event,menu)" type="star" :theme="saveList.filter(e=>e.path==menu.path).length!=0?'filled':''" />
        </router-link>
        <div  v-if="menu.children" class="link-btn lib" @click="getSubmenu(menu.children)">
            <a-icon v-if="menu.meta.icon" :type=" menu.meta.icon "/>
            <span>{{ menu.meta.title }}（{{menu.children.filter(e=>!e.hidden).length}}）</span>
        </div>
      </a-col>
    </a-row>
    <a-row v-else :gutter="24">
      <draggable v-model="saveList" @end="onEnd">
      <a-col class="menu-box" span="6" v-for="(menu,index) in saveList" :key="menu.path">
        <router-link @click.native="hiddenMenu($event,menu)" v-if="!menu.children" :class="selectedMenu==menu.path?'link-btn selected' : 'link-btn'" :to="{ name: menu.name }">
          <a-icon v-if="menu.meta.icon" :type=" menu.meta.icon " />
          <span>{{ menu.meta.title }}</span>
          <a-icon style="font-size:24px;margin-left:12px" @click.stop="toggleSave($event,menu)" type="star" theme="filled" />
        </router-link>
      </a-col>
      </draggable>
    </a-row>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import {mapState} from "vuex";
import Vue from 'vue';
import {USER_NAME} from "@/store/mutation-types";

export default {
  name: "Main",
  computed: {
    ...mapState({
      // 主路由
      mainRouters: state => state.permission.addRouters,
      // 后台菜单
      permissionMenuList: state => state.user.permissionList
    })
  },
  components:{
    draggable
  },
data(){
  return{
    username:Vue.ls.get(USER_NAME),
    lookMode:false,
    menus:[],
    selectedMenu:'',
    pMenu:[],
    hasPMenu:false,
    saveList:[]
  }
},
  created() {

    this.saveList = Vue.ls.get("CAHCE_MENU_DATA_"+this.username) || []
    //--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
    //this.menus = this.mainRouters.find((item) => item.path === '/').children;
    this.menus = this.permissionMenuList.filter(e=>!e.hidden)
  },
  methods:{
    onEnd() {
      Vue.ls.set("CAHCE_MENU_DATA_"+this.username,this.saveList)
    },
    changeMode(check){
      this.lookMode=check
    },
    toggleSave(event,menu){
      event.preventDefault()
      if(this.saveList.filter(e=>e.path==menu.path).length!=0){
        this.saveList =  this.saveList.filter(e=>e.path!=menu.path)
      }else{
        this.saveList.push(menu)
      }
      this.save()
    },
    save(){
      Vue.ls.set("CAHCE_MENU_DATA_"+this.username,this.saveList)
    },
    goBack(){
      this.menus=this.pMenu.slice(-1)[0]
      this.pMenu.pop()
      if(this.pMenu.length==0){
        this.hasPMenu=false
      }
    },
    getSubmenu(menu){
      this.pMenu.push(this.menus)
      this.hasPMenu=true
      this.menus=menu.filter(e=>!e.hidden)
    },
    hiddenMenu(event,menu){
      event.preventDefault();
      this.$emit("hiddenMenu")
      this.selectedMenu=menu.path
      this.$router.push({ name: menu.name })
    }
  }
}
</script>

<style scoped>
.link-btn{
  display: block;
  font-size:20px;
  text-align: center;
  border:1px solid #0B82C6;
  border-radius: 4px;
  padding:48px 16px;
  margin-bottom:24px;
  cursor: pointer;
}
.link-btn.lib{
  background: #E6F5FB;
  color:#0B82C6;
}
.link-btn.selected{
  background: #0B82C6;
  color:#ffffff;
}
.link-btn>span{
  margin-left:8px;
}
</style>